<template>
  <div class="player-mini" :style="{
    bottom: PlayerMiniBottom
  }">
    <router-link v-if="currentMusic.id" class="container" tag="div" to="/player">
      <div class="cover" :class="{playing}">
        <img v-lazy="currentMusic.image + '?param=800y800'">
      </div>
      <div class="content">
        {{currentMusic.name}}—{{singers}}
      </div>
      <div class="control" @click.stop="playing = !playing">
        <icon-svg :icon-class="playing ? 'zanting' : 'bofang'" />
      </div>
      <div class="control" @click.stop="showPlaylist = !showPlaylist">
        <icon-svg icon-class="bofanggedan" />
      </div>
    </router-link>
    <audio v-if="isApp"
           :src="currentMusic.url"
           @canplay="ready"
           @error="error"
           @emptied="emptied"
           @play="play"
           @pause="pause"
           @timeupdate="updateTime"
           @ended="end"
           @waiting="waiting"
           @volumechange="ChangeVolume"
           ref="audio"/>

  </div>
</template>

<script>
import { GetLyricAsync } from 'api/song'
import { ModeType } from 'common/js/constant'
import Lyric from 'common/js/lyric-parser'
import Vue from 'vue'

export default {
  name: 'player-mini',
  props: {
    isApp: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      PlayerMiniBottom: 0,
      audio: null,
      currentTime: 0,
      loading: false,
      Touching: false,
      canUpdateTime: false
    }
  },
  mounted () {
    window.audio = this
    this.audio = this.$refs.audio
    Vue.prototype.$audio = this
    this.audio.volume = 0.5

    setInterval(() => {
      if (!this.Touching) this.canUpdateTime = true
    }, 1000)
  },
  methods: {
    getLyric (id) {
      if (this.lyric) {
        this.lyric.stop()
        this.$store.dispatch('player/setLyric', null)
      }
      GetLyricAsync(id).then(res => {
        const lyric = new Lyric(res, lyricCurrent => {
          this.$store.dispatch('player/setLyricCurrent', lyricCurrent)
        })
        this.$store.dispatch('player/setLyric', lyric)
        if (this.playing) this.lyric.play()
      }).catch(err => {
        console.log(err)
        this.$store.dispatch('player/setLyric', null)
        this.$store.dispatch('player/setLyricCurrent', null)
      })
    },
    ChangeMode () {
      this.mode = this.mode === 2 ? this.mode = 0 : this.mode + 1
    },
    Again () { //  单曲循环
      this.audio.load()
      this.lyric.seek(0)
    },
    Next () {
      this.$store.dispatch('player/Next')
    },

    /* Audio 对象 */
    ready () {
      console.log('播放器Ready')
      this.audio.play()
      //  如果  歌词为暂停状态 播放歌词
      if (this.lyric && !this.lyric.state) {
        this.lyric.togglePlay()
      }
    },
    error () {
      console.log('播放器错误')
      this.audio.pause()
      if (this.lyric) this.lyric.stop()
    },
    emptied () {
      console.log('网络错误、src加载错误')
      this.audio.pause()
    },
    pause () {
      console.log('暂停')
      this.$store.dispatch('player/setPlaying', false)

      if (this.lyric && this.lyric.state === 1) {
        this.lyric.togglePlay()
      }
    },
    play () {
      console.log('开启播放') //  播放器开启播放
      this.$store.dispatch('player/setPlaying', true)

      //  如果为暂停状态 播放歌词
      if (this.lyric && this.lyric.state === 0) this.lyric.togglePlay()
    },
    updateTime (e) { //  播放进度
      if (this.canUpdateTime) {
        this.canUpdateTime = false
        this.currentTime = e.target.currentTime
      }
    },
    waiting (e) {
      console.log('加载中...')
      this.loading = true
      //  如果为播放状态 暂停歌词
      if (this.lyric && this.lyric.state === 1) this.lyric.togglePlay()
    },
    end () { //  播放到结尾的结束事件
      this.mode === 0 ? this.Again() : this.Next()
    },
    bufferProgress () {
      const buffer = this.audio.buffered
      let ret = []
      for (let i = 0; i < buffer.length; i++) {
        ret.push([buffer.start(i), buffer.end(i)])
      }
      console.log(ret)
    },
    ChangeVolume (e) { //  监听音量时间
      // console.log('音量：', e.target.volume)
    },
    SetCurrentTime (time) {
      this.$refs.audio.currentTime = this.currentTime = time
    }
  },
  watch: {
    $route (newRoute) {
      // if (!this.playList.length) return this.PlayerMiniBottom = '60px'
      this.PlayerMiniBottom = !this.playList.length ? '-60px' : newRoute.meta.player_mini_height || 0
    },
    currentMusic (musicData) {
      if (musicData.id) {
        // 请求歌词
        this.getLyric(musicData.id)
      }
      if (musicData.url) {
        this.currentTime = 0
      }
    },
    playList () {
      this.PlayerMiniBottom = !this.playList.length ? '-60px' : this.$route.meta.player_mini_height || 0
    }
  },
  computed: {
    currentMusic () {
      return this.$store.state.player.currentMusic
    },
    singers () {
      return this.$store.state.player.currentMusic.singer.map(i => i.name).join('/')
    },
    playList () {
      return this.$store.state.player.playList
    },
    playing: {
      get () {
        return this.$store.state.player.playing
      },
      set (value) {
        if (typeof value === 'boolean') {
          this.$store.dispatch('player/setPlaying', value)
          value ? this.audio.play() : this.audio.pause()
        }
      }
    },
    mode: {
      get () {
        return this.$store.state.player.mode
      },
      set (value) {
        this.$store.dispatch('player/setMode', value)
      }
    },
    modeTest () {
      return ModeType.find(item => item.type === this.mode).text
    },
    lyric () {
      return this.$store.state.player.lyric
    },
    showPlaylist: {
      get () {
        return this.$store.state.player.showPlaylist
      },
      set (value) {
        this.$store.dispatch('player/change_state', { key: 'showPlaylist', value })
      }
    }
  }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";
  @import "~common/style/mixins.less";

  .player-mini {
    height: 60px;
    padding: 0 20px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    transition: background-color,bottom .3s;
    background: @color-background;
    z-index: 199;
  }

  .container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .cover {
      width: 40px;
      height: 40px;
      .border-radius(50%);
      animation: playing 10s linear infinite paused;
      /*display: flex;
      justify-content: center;
      align-items: center;
      border: 5px solid;
      box-sizing: border-box;*/
      img {
        width: 100%;
        height: 100%;
      }
    }
    .cover.playing { animation: playing 3s linear infinite running }

    .content {
      padding: 0 12px;
      font-size: @font-size-medium;
      color: @color-text;
      transition: color .3s;
      line-height: 60px;
      .no-wrap-flex();
    }
    .control {
      width: 40px;
      height: 40px;
      svg {
        font-size: 32px;
        padding: 4px;
      }
    }
  }
  @keyframes playing {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(360deg) }
  }

</style>
